<template>
  <div id="subarea">
     <group>
      <cell :title="$t('message.name')" :value="$t('张三')"></cell>
      <div class="textBox">
        <h2 class='atext'>C </h2>
        <p class="areatext">分区</p>

      </div>
      <div class="grade">
        <p>历史最好成绩</p>
        <p>--：--</p>
      </div>


<!--
      <cell-form-preview :list="list"></cell-form-preview> -->
    </group>
       <card :header="{title: $t('2016xxxx国际马拉松赛')}" >
      <div slot="content" class="card-demo-flex card-demo-content01">
        <div class="vux-1px-r">
          <span>{{ $t('message.matchDate') }}</span>
          <br/>
          {{ $t('2016-04-10') }}
        </div>
        <div class="vux-1px-r">
          <span>{{ $t('message.matchTime') }}</span>
          <br/>
          {{ $t('05:01:57') }}
        </div>
        <div class="vux-1px-r">
          <span>{{ $t('message.projectItem') }}</span>
          <br/>
          {{ $t('全程') }}
        </div>
        <div>
          <span>{{ $t('message.speed') }}</span>
          <br/>
          {{ $t('07:09') }}
        </div>
      </div>
    </card>
        <!-- <card :header="{title: $t('2016xxxx国际马拉松赛')}" :footer="{title: $t('message.more'),link:'' }" @on-click-footer='onClickFooter1' ref="foot"> -->
          <card :header="{title: $t('2016xxxx国际马拉松赛')}" :footer="{title: this.title,link:'' }" @on-click-footer='onClickFooter1' ref="foot">
      <div slot="content" class="card-demo-flex card-demo-content01">
        <div class="vux-1px-r">
          <span>{{ $t('message.matchDate') }}</span>
          <br/>
          {{ $t('2016-04-10') }}
        </div>
        <div class="vux-1px-r">
          <span>{{ $t('message.matchTime') }}</span>
          <br/>
          {{ $t('05:01:57') }}
        </div>
        <div class="vux-1px-r">
          <span>{{ $t('message.projectItem') }}</span>
          <br/>
          {{ $t('全程') }}
        </div>
        <div>
          <span>{{ $t('message.speed') }}</span>
          <br/>
          {{ $t('07:09') }}
        </div>
      </div>
    </card>
        <card :header="{title: $t('2016xxxx1国际马拉松赛')}" v-show="subareaCard" :footer="{title: $t('message.less'),link:''}" @on-click-footer='onClickFooter2' >
      <div slot="content" class="card-demo-flex card-demo-content01">
        <div class="vux-1px-r">
          <span>{{ $t('message.matchDate') }}</span>
          <br/>
          {{ $t('2016-04-10') }}
        </div>
        <div class="vux-1px-r">
          <span>{{ $t('message.matchTime') }}</span>
          <br/>
          {{ $t('05:01:57') }}
        </div>
        <div class="vux-1px-r">
          <span>{{ $t('message.projectItem') }}</span>
          <br/>
          {{ $t('全程') }}
        </div>
        <div>
          <span>{{ $t('message.speed') }}</span>
          <br/>
          {{ $t('07:09') }}
        </div>
      </div>
    </card>
      <div class="searchbox">
        <p>以上成绩均由田协官网提供数据</p>
        <a href="#">点击查询</a>
      </div>

     <flexbox>
        <flexbox-item>
          <x-button type="primary">进行申诉</x-button>
        </flexbox-item>
        <flexbox-item>
          <x-button type="primary">报名详情</x-button>
        </flexbox-item>
      </flexbox>
        <!-- <div class="tips">
        <p>重要提示：2017西安国际马拉松将启用分区检录系统，</p>
      </div>
   -->




  </div>
</template>

<script type="text/ecmascript-6">
/* eslint-disable*/
import {
  XButton,
  XImg,
  Toast,
  ToastPlugin,
  Flexbox,
  FlexboxItem,
  Card,
  Group,
  Cell,
  CellFormPreview
} from "vux";
import Vue from "vue";
/* eslint-disable*/
Vue.use(ToastPlugin,{time:3000});

const FastClick = require("fastclick");
FastClick.attach(document.body);

export default {
  data() {
    return {
      title: this.$t('message.more'),
      subareaCard: false
    };
  },
  created() {},
  methods: {
    onClickFooter1() {
      this.subareaCard = true;

      // this.$refs.foot.footer.title = "";
      // this.$refs.foot.footer.link = "";
      this.title = "";
      //console.log(this.$refs.foot.footer.title);
    },
    onClickFooter2() {
      this.subareaCard = false;
      this.title =this.$t('message.more');
    }
  },
  components: {
    Flexbox,
    FlexboxItem,
    XButton,
    XImg,
    Toast,
    ToastPlugin,
    Card,
    Group,
    Cell,
    CellFormPreview
  }
};
</script>

  <style lang="less" rel="stylesheet/less">
@import "~vux/src/styles/1px.less";
#subarea {
  line-height: 2;
  .textBox{
  text-align:center;
  }
  .searchbox{
    padding:10px 15px;
    font-size:10px;
    color:red;
  }
 h2.atext{
  text-align:center;
  display:inline-block;
  font-size:50px;
}
p{
display:inline-block;
.areatext{
  text-align:center;

}
}
.tips{
  padding:10px 15px;
  color:#999;
}
.grade{
  text-align:center;
  padding:10px
}
}
.weui-panel__hd {
  text-align: center;
}
.card-demo-flex {
  display: flex;
}
.card-demo-content01 {
  padding: 10px 0;
}
.card-padding {
  padding: 15px;
}
.card-demo-flex > div {
  flex: 1;
  text-align: center;
  font-size: 12px;
}
.card-demo-flex span {
  color: #f74c31;
}

</style>
